<!--
    reactive() - 只能接收一个对象类型的数据，返回一个响应式的对象
    ref() - 能接收简单类型或对象类型，返回一个响应式的对象
 -->
<script setup>
import {reactive, ref} from "vue";
// 1.reactive()
const state = reactive({
    name: '陆兆祥',
    age: 18
});
const setAge = () => {
    state.age++
}
// 2.ref()
// 本质是在原有传入数据的基础上，外层包了一层对象，封装成了复杂类型
// 然后再去借助 reactive() 实现了响应式
// 所以说：
// (1) 在脚本中，要访问真实的数据，要通过 .value
// (2) 但是在模板中， .value 就不用加（模板文件帮我们扒了一层）
const count = ref(0);
console.log(count.value)
const setCount = () => {
    count.value++
}

// 统一：用 ref() 声明响应式数据
</script>

<template>
    <h3 style="text-align: center;">Vue3-Study</h3>
    <hr>
    <div>reactive()</div>
    <div>{{ state.name }} - {{ state.age }}</div>
    <button @click="setAge">年龄+1</button>
    <hr>
    <div>ref()</div>
    <div>{{ count }}</div>
    <button @click="setCount">数量+1</button>
</template>